import * as React from 'react';
import {Card , Statistic} from "antd";
import { ArrowUpOutlined }  from '@ant-design/icons';
import * as AllIcons from "@ant-design/icons";


export interface StatisticCardProps{
    icon: string;
    datasource: string;
    suffix: string;
    title: string;
}


const DynamicIcon= ({iconName}) => {
    const IconComponent = AllIcons[iconName];
    if(!IconComponent){
        return <ArrowUpOutlined />;
    }
    return <IconComponent />;
}

const StatisticCard: React.FC<StatisticCardProps> = function({icon,datasource,suffix,title,...otherProps}){

    const[value, setValue] = React.useState(0);
    //console.log(Card, Statistic);
    React.useEffect(()=>{
        fetch(datasource)
        .then(response => response.json())
        .then(data => {
            setValue(data.data);
        })
    },[])

    let defaultValue = 11.28;
    
    if(datasource === ''){
       setValue(defaultValue);
    }else{
       
    }


    return(
        <>
        <Card variant="borderless" style={{width: "200px"}}>
        <Statistic
          title={title}
          value={value}
          precision={2}
          valueStyle={{ color: '#3f8600' }}
          prefix={<DynamicIcon iconName={icon} />}
          suffix={suffix}
        />
        </Card>
        </>
    )
}

StatisticCard.displayName = "StatisticCard";
export default StatisticCard;